{% extends("common/base.html")%}
{% block title %}  {% endblock %}
{% block head %}

{% endblock %}

{% block body %}
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card layui-form">
                <div class="layui-card-header">查询条件</div>
                <div class="layui-card-body layui-row layui-col-space15">
                    <div class="layui-col-md2">
                        <input type="text" class="layui-input" id="keyword" placeholder="请输入关键字"
                            autocomplete="off" />
                    </div>
                    <div class="layui-col-md2">
                        <button class="layui-btn" data-type="reload"><i
                                class="layui-icon layui-icon-search"></i>搜索</button>
                    </div>
                    <div class="layui-col-md12">
                        <div class="layui-btn-group demoTable">
                            {% if current_user.have_permission('admin.add') %}<button class="layui-btn" data-type="add"><i
                                    class="layui-icon layui-icon-addition"></i>添加</button>{% endif %}
                            {% if current_user.have_permission('admin.delete_op') %}<button class="layui-btn layui-btn-danger"
                                data-type="delAll"><i class="layui-icon layui-icon-delete"></i>批量删除</button>{% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <div class="layui-card layui-form">
                <div class="layui-card-body">
                    <table class="layui-hide" id="app" lay-filter="app"></table>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="operate">
    {% if current_user.have_permission('admin.edit') %}<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>{% endif %}
    {% if current_user.have_permission('admin.delete_op') %}<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>{% endif %}
</script>
<script>
    var table = null;
    layui.use('table', function () {
        table = layui.table;
        table.render({
            id: "app",
            elem: '#app',
            url: "{{url_for('admin.look')}}",
            cols: [[
                { checkbox: true, fixed: true },
                { field: 'id', width: 80, title: "ID", sort: true }
                , { field: 'username', title: "用户名" }
                , { field: 'role_name', title: "角色" }
                , { field: 'times', title: "登录次数" }
                , { field: 'last_login_entered', title: "最后登录时间" }
                , { field: 'login_entered', title: "登录时间" }
                , { field: 'date_entered', title: "创建时间" }
                , {
                    title: "状态", templet: function (mdata) {
                        if (mdata.status == 1) {
                            return '<span class="layui-badge layui-bg-green">启用</span>';
                        }
                        return '<span class="layui-badge">停止</span>';
                    }
                }
                , { fixed: 'right', title: "操作", toolbar: '#operate', width: 110 }
            ]],
            page: true,
            cellMinWidth: 80,
            // toolbar: '#toolbar',
            // defaultToolbar: ['filter', 'exports', 'print']
        });
        table.on('tool(app)', function (obj) {
            let data = obj.data, id = data.id;
            switch (obj.event) {
                case 'edit':
                    layer.open({
                        type: 2,
                        title: "编辑",
                        area: ["600px", "500px"],
                        content: "{{url_for('admin.edit')}}?id=" + id,
                        maxmin: true,
                    });
                    break;
                case 'del':
                    delete_op(id, "您确定要删除此项？");
                    break;
            }
        });

        var active = {
            reload: function () {
                var keyword = $("#keyword").val();
                //执行重载
                table.reload('app', {
                    page: {
                        curr: 1
                    },
                    where: {
                        keyword: keyword
                    }
                });
            },
            add: function () {
                layer.open({
                    type: 2,
                    title: "添加",
                    area: ["600px", "500px"],
                    content: "{{url_for('admin.add')}}",
                    maxmin: true,
                });
            },
            delAll: function () {
                var checkStatus = table.checkStatus('app'),
                    data = checkStatus.data, ids = "";

                if (data.length == 0) {
                    layer.msg("请选择要删除的项", {
                        icon: 5,
                        shift: 6
                    });
                    return false;
                }
                for (let i = 0; i < data.length; i++) {
                    if (i == data.length - 1) {
                        ids += data[i].id;
                    } else {
                        ids += data[i].id + ",";
                    }
                }
                delete_op(ids, "您确定要删除选中的项？");
            }
        };

        $('.layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] && active[type].call(this);
        });

        function delete_op(id, msg) {
            layer.confirm(msg, function (index) {
                $.ajax({
                    url: "{{url_for('admin.delete_op')}}",
                    data: { id: id },
                    type: "post",
                    success: function (data) {
                        if (data.code == 1) {
                            layer.msg(data.msg, {
                                icon: 1
                            });
                            active['reload'].call();
                        } else {
                            layer.msg(data.msg, {
                                icon: 5,
                                shift: 6
                            });
                        }
                        layer.close(index);
                    }
                });
                layer.close(index);
            });
        }
    });
</script>
{% endblock %}